<script setup>

import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {ref} from "vue";
import {get, post} from "@/net";
import {ElMessage} from "element-plus";

let newDialog = ref(false)
let updateDialog = ref(false)
let deleteDialog = ref(false)
const tidToDelete = ref(null)
const newForm = ref([])
const updateForm = ref([])

const tableData = ref([])

const getData = () => {
    get('api/type/all', (data) => {
        tableData.value = data
        initData()
    })
}

const getDataByTid = (tid) => {
    get('api/type/tid?tid=' + tid, (data) => {
        updateDialog.value = true
        updateForm.value = data
    })

}

const addType = () => {
    post('api/type/add', {
        type: newForm.value.type
    }, (message) => {
        newDialog.value = false
        newForm.value = []
        getData()
        ElMessage.success(message)
    })
}

const updateType = () => {
    post('api/type/update', {
        tid: updateForm.value.tid,
        type: updateForm.value.type
    }, (message) => {
        updateDialog.value = false
        getData()
        ElMessage.success(message)
    })
}

const openDeleteDialog = (tid) => {
    tidToDelete.value = tid
    deleteDialog.value = true
}

const deleteType = () => {
    post('api/type/delete', {
        tid: tidToDelete.value
    }, (message) => {
        deleteDialog.value = false
        getData()
        ElMessage.success(message)
    })
}

const pageSize = 10 // 每页显示的数据数量
const currentPage = ref(1) // 当前页码
const total = ref(0) // 总数据条数
const pagedData = ref([]) // 当前页的数据

// 初始化数据
const initData = () => {
    total.value = tableData.value.length
    updatePageData()
}

// 更新当前页的数据
const updatePageData = () => {
    const start = (currentPage.value - 1) * pageSize
    const end = start + pageSize
    pagedData.value = tableData.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange = (newPage) => {
    currentPage.value = newPage
    updatePageData()
}

getData()
</script>

<template>
    <div class="content">
        <div class="content-top">
            <div style="margin: 16px 30px;font-size: 20px;font-weight: bold">
                文章类型
            </div>
            <div style="margin: 13px 0 13px 670px">
                <el-button
                        style="height: 32px;width: 100px;"
                        type="success"
                        :icon="Plus"
                        @click="newDialog = true"
                >
                    新增类型
                </el-button>
            </div>
            <el-dialog
                    v-model="newDialog"
                    title="新增类型"
                    width="500"
                    align-center
            >
                <el-form :model="newForm">
                    <el-form-item label="类型名称" :label-width="100">
                        <el-input v-model="newForm.type" placeholder="请输入类型名称" style="width: 250px"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="newDialog = false">
                            取消
                        </el-button>
                        <el-button type="primary" @click="addType">
                            提交
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class="content-bottom">
            <div class="content-list">
                <el-table
                        class="list"
                        border
                        stripe
                        :data="pagedData"
                        :default-sort="{ prop: 'date', order: 'descending' }"
                        style="width: 50%;margin: auto"
                >
                    <el-table-column prop="tid" label="ID" width="180"/>
                    <el-table-column prop="type" label="类型名称" width="180"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary" @click="getDataByTid(scope.row.tid)" :icon="Edit"/>
                                <el-button type="danger" @click="openDeleteDialog(scope.row.tid)" :icon="Delete"/>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog
                    v-model="updateDialog"
                    title="修改类型"
                    width="500"
                    align-center
            >
                <el-form :model="updateForm">
                    <el-form-item label="类型名称" :label-width="100">
                        <el-input v-model="updateForm.tid" style="display: none"/>
                        <el-input v-model="updateForm.type" placeholder="请输入类型名称" style="width: 250px"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="updateDialog = false">
                            取消
                        </el-button>
                        <el-button type="warning" @click="updateType">
                            修改
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog
                    v-model="deleteDialog"
                    title="删除类型"
                    width="500"
                    align-center
            >
                <span>确定要删除该类型吗？</span>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="deleteDialog = false">
                            取消
                        </el-button>
                        <el-button type="danger" @click="deleteType">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <div>
                <el-pagination
                        style="margin: 20px 350px"
                        layout="total, prev, pager, next, jumper"
                        background
                        :page-size="pageSize"
                        :current-page="currentPage"
                        :total="total"
                        @current-change="handlePageChange"
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 1014px;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    gap: 14px;
}

.content-top {
    width: 1014px;
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-bottom {
    width: 1014px;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-list {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.content-list:hover {
    background-color: rgba(236, 233, 233, 0.7);
}

.content-info span {
    margin-right: 50px;
}
</style>